<template>
    <div class="registerarea">
        <h3>
            注册新用户
            <div class="login">我有账号，去<a href="#">登录</a></div>
        </h3>
        <div class="reg-form">
            <form action="">
                <ul>
                    <li><label for="">手机号：</label> <input type="text" class="inp" id="ipone">
                        <p class="message0 samemessage">请输入手机号</p>
                    </li>
                    <li><label for="">短信验证码：</label> <input type="text" class="inp" id="xinxi">
                        <p class="message1 samemessage">请输入验证码</p>
                    </li>
                    <li><label for="">登录密码：</label>
                        <input type="password" class="inp" id="psw">
                        <p class="message2 samemessage">请输入6~16位密码</p>
                        <img src="images/close.png" alt="" id="eye">
                    </li>
                    <li class="safe">安全程度 <em class="ruo">弱</em> <em class="middle">中</em> <em class="qiang">强</em>
                    </li>
                    <li><label for="">确认密码：</label>
                        <input type="password" class="inp" id="psw2">
                        <p class="message3 samemessage">请确认密码</p>
                    </li>
                    <li class="agree"><input type="checkbox" name="" id="">同意协议并注册
                        <a href="#">知晓用户协议</a>
                    </li>
                    <li>
                        <input type="submit" value="提交注册" class="btn">
                    </li>
                </ul>
            </form>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
.registerarea {
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.registerarea h3 {
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    line-height: 42px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 400;
}

.login {
    float: right;
    font-size: 14px;
}

.login a {
    color: #c81523;
}

.reg-form {
    width: 600px;
    margin: 50px auto 0;

}

.reg-form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
}

.reg-form ul li {
    position: relative;
    margin-top: 20px;
}

.reg-form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}

.reg-form ul li img {
    position: absolute;
    top: 5px;
    right: 60px;
    width: 24px;
}

.samemessage {
    display: inline-block;
    font-size: 12px;
    background: url(../images/mess.png) no-repeat left center;
    padding-left: 20px;
}

.wrong {
    color: red;
    background-image: url(../images/wrong.png);
}

.right {
    color: green;
    background-image: url(../images/right.png);
}

.safe {
    padding-left: 170px;
}

.safe em {
    padding: 0 12px;
    color: #fff
}

.ruo {
    background-color: #de1111;
}

.middle {
    background-color: #40b83f;
}

.qiang {
    background-color: #f79100;
}

.agree {
    padding-left: 95px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: #1ba1e6;
}

.btn {
    width: 200px;
    height: 34px;
    background-color: #c81523;
    font-size: 14px;
    color: #fff;
    margin: 30px 0 0 90px
}

</style>